/*
 * @Description: 混合宏
 * @Author: HuiSir<https://gitee.com/huisir001>
 * @Date: 2021-09-01 16:37:47
 * @LastEditTime: 2025-09-25 17:02:53
 */

/** 
 * 清除浮动
 */
@mixin clearfix {
  zoom: 1;
  &::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
  }
}

/** 
 * 滚动条mixin
 */
@mixin scrollBar(
  $width: 6px,
  $track-color: #f3f4f6,
  $thumb-color: #cccccc,
  $thumb-hover-color: #999999,
  $border-radius: 3px
) {
  scroll-behavior: smooth;

  // WebKit 内核浏览器（Chrome、Safari、Edge等）
  &::-webkit-scrollbar {
    width: $width;
  }

  &::-webkit-scrollbar-track {
    background: $track-color;
    border-radius: $border-radius;
  }

  &::-webkit-scrollbar-thumb {
    background-color: $thumb-color;
    border-radius: $border-radius;
    transition: background-color 0.2s ease;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: $thumb-hover-color;
  }

  // Firefox 浏览器支持
  scrollbar-width: thin;
  scrollbar-color: $thumb-color $track-color;
  transition: scrollbar-color 0.2s ease;

  // Firefox hover效果模拟
  &:hover {
    scrollbar-color: $thumb-hover-color $track-color;
  }
}

// 使用示例
// 1. 基础滚动条
// .basic-scroll {
//   @include scrollBar();
//   height: 300px;
//   padding: 1rem;
//   border: 1px solid #e5e7eb;
//   border-radius: 6px;
// }

// // 2. 深色主题滚动条
// .dark-scroll {
//   @include scrollBar(
//     $width: 8px,
//     $track-color: #1f2937,
//     $thumb-color: #4b5563,
//     $thumb-hover-color: #9ca3af,
//     $border-radius: 4px
//   );
//   height: 400px;
//   padding: 1rem;
//   background-color: #111827;
//   color: white;
//   border-radius: 8px;
// }

// // 3. 高对比度滚动条
// .high-contrast-scroll {
//   @include scrollBar(
//     $width: 10px,
//     $track-color: #e5e7eb,
//     $thumb-color: #6b7280,
//     $thumb-hover-color: #111827,
//     $border-radius: 5px
//   );
//   height: 250px;
//   padding: 1rem;
//   border: 2px solid #d1d5db;
//   border-radius: 8px;
// }

/** 
 * 隱藏滚动条
 */
@mixin hideScrollBar {
  &::-webkit-scrollbar {
    display: none;
  }
}
